<template>
	<div id="advertising">
		<el-container>
			<div class="top">
				<el-input placeholder="请输入标题关键字" clearable v-model="lookname"></el-input>
				<el-input placeholder="请输入内容关键字" clearable v-model="lookcontent"></el-input>
				<el-button type="primary" icon="el-icon-search" @click="lookup">查找</el-button>
				<el-button type="primary" icon="el-icon-edit" @click="dialogTableVisible = true">添加</el-button>
				<download-excel :data="tableData" :fields="daocu" name="advertising-manage.xls">
					<el-button type="primary" icon="el-icon-download">导出</el-button>
				</download-excel>
			</div>
			<el-main>
				<!-- 列表 -->
				<el-table :data="tableData" border style="width: 100%">
					<el-table-column prop="id" sortable label="广告ID"></el-table-column>
					<el-table-column prop="name" label="广告标题"></el-table-column>
					<el-table-column prop="content" label="广告内容"></el-table-column>
					<el-table-column prop="url" label="广告图片">
						<template slot-scope="scope">
							<img :src="scope.row.url" style="width: 60%; height: 70%;">
						</template>
					</el-table-column>
					<el-table-column prop="position" label="广告位置"></el-table-column>
					<el-table-column prop="link" label="活动链接"></el-table-column>
					<el-table-column prop="" label="是否启用">
						<template slot-scope="scope">
							<el-button type="success" plain size="mini" v-if="scope.row.enabled">启用</el-button>
							<el-button type="primary" plain size="mini" v-else>不启用</el-button>
						</template>
					</el-table-column>
					<el-table-column label="操作" align="center">
						<template slot-scope="scope">
							<el-button size="mini" type="primary" @click="getData(scope.$index,scope.row)">编辑</el-button>
							<el-button size="mini" type="danger" @click="deletes(scope.$index)">删除</el-button>
						</template>
					</el-table-column>
				</el-table>
				<!-- 添加   编辑 -->
				<el-dialog :title="chuangj" :visible.sync="dialogTableVisible">
					<el-form :model="form">
						<el-form-item label="广告标题" :label-width="formLabelWidth" :rules="[
					{ required: true, message: '广告标题不能为空', trigger: 'blur' }]">
							<el-input autocomplete="off" v-model="form.name" style="width: 60%;"></el-input>
						</el-form-item>
						<el-form-item label="广告内容" :label-width="formLabelWidth" :rules="[
					{ required: true, message: '广告内容不能为空', trigger: 'blur' }]">
							<el-input v-model="form.content" style="width: 60%;"></el-input>
						</el-form-item>
						<el-form-item label="广告图片" :label-width="formLabelWidth" :rules="[
					{ required: true, trigger: 'blur' }]">
							<el-upload class="avatar-uploader" :headers="token"
								action="http://192.168.1.54:8080/admin/storage/create/" :show-file-list="false"
								:on-success="handleAvatarSuccess" :before-upload="beforeAvatarUpload">
								<img v-if="imageUrl" :src="imageUrl" class="avatar">
								<i v-else class="el-icon-plus avatar-uploader-icon"></i>
							</el-upload>
							<span>只能上传jpg/png文件，且不超过1024kb</span>
						</el-form-item>
						<el-form-item label="广告位置" :label-width="formLabelWidth">
							<el-select v-model="home" placeholder="请选择">
								<el-option v-for="item in region" :key="item.value" :label="item.label"
									:value="item.value">
								</el-option>
							</el-select>
						</el-form-item>
						</el-form-item>
						<el-form-item label="活动链接" :label-width="formLabelWidth">
							<el-input autocomplete="off" v-model="form.link" style="width: 60%;"></el-input>
						</el-form-item>
						<el-form-item label="是否启用" :label-width="formLabelWidth">
							<el-select v-model="start" placeholder="请选择">
								<el-option v-for="item in qcsu" :key="item.value" :label="item.label"
									:value="item.value">
								</el-option>
							</el-select>
						</el-form-item>
					</el-form>
					<div slot="footer" class="dialog-footer">
						<el-button @click="dialogTableVisible = false">取 消</el-button>
						<el-button type="primary" @click="qdiao()">确 定</el-button>
					</div>
				</el-dialog>
			</el-main>
			<!-- 分页 -->
			<el-footer>
				<el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange"
					:page-sizes="[10, 20, 30, 40,50,100]" :page-size="10"
					layout="total, sizes, prev, pager, next, jumper" :total="paging">
				</el-pagination>
			</el-footer>
		</el-container>
	</div>
</template>

<script>
	import {
		gglist, //列表
		ggchazao, //查找
		ggtian, //添加
		ggbian, //编辑
		ggremove, //删除
		//分页
		ggfen,
		ggfeng
	} from "@/api/http.js"
	export default {
		data() {
			return {
				tableData: [], //表格
				// 查找
				lookname: '',
				lookcontent: '',
				// 添加 编辑
				dialogTableVisible: false, //控制弹窗
				form: {
					name: '',
					title: '',
					content: '',
					position: '',
					link: '',
				},
				home: '选项1',
				start: '',
				region: [{
					value: '选项1',
					label: '首页'
				}],
				qcsu: [{
						value: true,
						label: '启用'
					},
					{
						value: false,
						label: '不启用'
					}
				],
				cid: 0,
				imageUrl: '', //头像
				chuangj: "创建",
				formLabelWidth: '120px',
				// 导出
				daocu: {
					"广告ID": "id",
					"广告标题": "name",
					"广告内容": "content",
					"广告图片": "url",
					"广告位置": "position",
					"活动链接": "link",
					"是否启用": "enabled"
				},
				token: {
					'X-Litemall-Admin-Token': this.$cookie.get("tokens")
				},
				paging: 0 //分页
			}
		},
		created() {
			// 数据渲染
			this.bloated()
		},
		watch: { //清空添加框
			dialogTableVisible() {
				if (!this.dialogTableVisible) {
					this.form.name = '' 
					this.form.content = '' 
					this.imageUrl = '' 
					this.form.link = ''
					this.start = ''
					this.chuangj = "创建"
				}
			}
		},
		methods: {
			// 获取数据
			bloated() {
				gglist().then((res) => {
					this.tableData = res.data.data.list
					this.paging = res.data.data.total
					// console.log(res.data.data.list)//测试
				})
			},
			// 查找
			lookup() {
				ggchazao(this.lookname, this.lookcontent).then(res => {
					this.tableData = res.data.data.list
				})
			},
			// 头像上传
			handleAvatarSuccess(res, file) {
				this.imageUrl = file.response.data.url;
			},
			beforeAvatarUpload(file) {
				const isJPG = file.type === 'image/jpeg';
				const isLt2M = file.size / 1024 / 1024 < 2;
				if (!isJPG) {
					this.$message.error('上传头像图片只能是 JPG 格式!');
				}
				if (!isLt2M) {
					this.$message.error('上传头像图片大小不能超过 2MB!');
				}
				return isJPG && isLt2M;
			},
			// 增加  编辑
			getData(index, row) { // 编辑广告
				this.cid = row.id
				if (this.cid) {
					this.form.name = row.name
					this.form.content = row.content
					this.form.link = row.link
					this.start = row.enabled
					this.imageUrl = row.url
				}
				this.chuangj = "编辑"
				this.dialogTableVisible = true;
			},
			qdiao() {
				if (this.cid) {
					let data = {
						id: this.cid,
						name: this.form.name, 
						content: this.form.content, 
						url: this.imageUrl,
						position: 1,
						enabled: this.start,
						link: this.form.link
					}
					ggbian(data).then(res => {
						// console.log(res) //测试
						if (res.data.errmsg == "成功") {
							this.$notify({
								title: '成功',
								message: '更新广告成功',
								type: 'success'
							});
							this.bloated(); 
						} else {
							this.$notify({
								title: '失败',
								message: '编辑失败',
								type: 'error'
							});
						}
					})
					this.dialogTableVisible = false; 
				} else { 
					let data = {
						name: this.form.name,
						content: this.form.content,
						url: this.imageUrl,
						position: 1,
						enabled: this.start,
						link: this.form.link
					}
					//添加广告
					ggtian(data).then(res => {
						// console.log(res)//测试
						if (res.data.errmsg == "成功") {
							this.$notify({
								title: '成功',
								message: '添加广告成功',
								type: 'success'
							});
							this.bloated();
							this.dialogTableVisible = false; 
						} else {
							this.$notify({
								title: '失败',
								message: '添加失败',
								type: 'error'
							});
						}
					})
				}
			},
			//广告删除
			deletes(index) {
				let data = {
					id: this.tableData[index].id
				}
					ggremove(data).then((res) => {
						// console.log(res)//测试
						this.$notify({
							title: '成功',
							message: '删除广告成功',
							type: 'success'
						});
						this.bloated();
				}).catch(() => {
					this.$message({
						type: 'info',
						message: '已取消删除'
					});
				});
			},
			// 分页
			handleCurrentChange(page) {
				ggfen(page).then((res) => {
					this.tableData = res.data.data.list
				})
			},
			handleSizeChange(num) {
				ggfeng(num).then((res) => {
					this.tableData = res.data.data.list
				})
			},
		}
	}
</script>

<style>
	#advertising .top {
		line-height: 40px;
		height: 40px !important;
		margin-bottom: 20px;
	}

	#advertising .top .el-input {
		width: 200px;
		margin-right: 10px;
	}

	#advertising .top .el-button {
		margin-right: 10px;
	}

	#advertising .top div {
		display: inline-block;
	}

	#advertising .el-main {
		padding-bottom: 5px;
	}

	#advertising .el-table__body tr .cell {
		text-align: center;
	}

	#advertising .has-gutter tr th {
		text-align: center;
	}

	#advertising .el-footer {
		border-bottom: 0px;
	}

	#advertising .el-form-item {
		font-weight: 700;
		color: #373737;
	}

	#advertising .el-form-item .el-input {
		width: 60%;
	}

	#advertising .avatar-uploader .el-upload {
		border: 1px dashed #d9d9d9;
		border-radius: 6px;
		cursor: pointer;
		position: relative;
		overflow: hidden;
	}

	#advertising .avatar-uploader .el-upload:hover {
		border-color: #409EFF;
	}

	#advertising .avatar-uploader-icon {
		font-size: 25px;
		color: #8c939d;
		width: 100px;
		height: 100px;
		line-height: 100px;
		text-align: center;
	}

	#advertising .avatar {
		width: 100px;
		height: 100px;
		display: block;
	}
</style>
